<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="65px"
        @submit.native.prevent
      >
        <el-form-item label="变量名称" prop="variableName">
          <common-input
            v-model="queryParams.variableName"
            clearable
            @enter="handleQuery"
          >
          </common-input>
        </el-form-item>
        <el-form-item label="变量说明" prop="variableExplain">
          <common-input
            v-model="queryParams.variableExplain"
            clearable
            @enter="handleQuery"
          >
          </common-input>
        </el-form-item>
        <common-dept
          ref="commonDept"
          :currentParent="currentParent"
          @getDeptId="getDeptId"
          @getDeptList="getDeptList"
          @getLoading="getLoading"
        ></common-dept>
      </el-form>
    </common-search>
    <!--    <div slot="tools">-->
    <!--      <el-row :gutter="10" class="mb8">-->
    <!--        <el-col :span="1.5">-->
    <!--          <el-button-->
    <!--            type="primary"-->
    <!--            plain-->
    <!--            icon="el-icon-plus"-->
    <!--            @click="handleAdd"-->
    <!--            v-hasPermi="['datascan:globalvariable:add']"-->
    <!--          >新增-->
    <!--          </el-button>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </div>-->
    <!--   表-->
    <common-table slot="content" v-loading="loading" :data="List">
      <el-table-column label="变量名称" align="left" prop="variableName" />
      <el-table-column
        label="变量值"
        align="left"
        prop="variableValue"
        show-overflow-tooltip
      />
      <el-table-column
        label="变量说明"
        align="left"
        prop="variableExplain"
        show-overflow-tooltip
      />
      <el-table-column label="组织" align="left" prop="deptName" width="180" />
      <el-table-column label="操作" align="left" width="90">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="edit(scope.row)"
            v-hasPermi="['datascan:globalvariable:edit']"
            >编辑
          </el-button>
          <!-- <el-button
            type="text"
            @click="getInfo(scope.row)"
          >详情
          </el-button> -->
          <el-button
            type="text"
            @click="del(scope.row)"
            v-hasPermi="['datascan:globalvariable:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      v-show="totalCount > 0"
      :total="totalCount"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <common-edit-dialog
      :visible="closeDialog"
      :title="isEdit ? '编辑参数配置' : '新增参数配置'"
      @cancel="cancel"
      @submit="submitForm"
      :buttonLoading="buttonLoading"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        @submit.native.prevent
      >
        <el-row :gutter="18">
          <el-col :span="24">
            <el-form-item label="变量名称" prop="variableName">
              <common-input
                v-model="form.variableName"
                placeholder="请输入"
                :maxlength="20"
                :disabled="isEdit"
              />
            </el-form-item>
            <el-form-item label="变量值" prop="variableValue">
              <common-input v-model="form.variableValue" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="变量说明" prop="variableExplain">
              <common-input
                v-model="form.variableExplain"
                placeholder="请输入"
              />
            </el-form-item>
            <common-add-dept
              ref="commonAddDept"
              :deptListParams="deptListParams"
              @getCheckedDeptId="getCheckedDeptId"
              :deptId="form.deptId"
            ></common-add-dept>
          </el-col>
        </el-row>
      </el-form>
    </common-edit-dialog>
    <common-info-dialog
      :visible="openInfo"
      :title="detailsTitle"
      @cancel="cancelInfo"
    >
      <common-info-table>
        <common-info-table-cell label="变量名称">
          {{ info.variableName }}
        </common-info-table-cell>
        <common-info-table-cell label="变量值">
          {{ info.variableValue }}
        </common-info-table-cell>
        <common-info-table-cell label="变量说明">
          {{ info.variableExplain }}
        </common-info-table-cell>
        <common-info-table-cell label="组织"
          >{{ info.deptName }}
        </common-info-table-cell>
      </common-info-table>
    </common-info-dialog>
  </common-list>
</template>

<script>
import {
  globalvariable_Lsit,
  globalvariable_query,
  globalvariable_delete,
  globalvariable_add,
  globalvariable_update,
} from "@/api/datascan/globalvariable/globalvariable";
import BaseList from "@/mixins/BaseList";
import { getSingleArray, getFullDept } from "@/utils/util";

export default {
  name: "index",
  mixins: [BaseList],
  data() {
    return {
      buttonLoading: false,
      loading: true,
      totalCount: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        variableName: "",
        variableExplain: "",
        deptIds: null,
      },
      List: [],
      //显示查询条件
      showSearch: true,
      //详情标题
      detailsTitle: "",
      openInfo: false,
      info: {
        variableName: "",
        variableExplain: "",
        variableValue: null,
        deptId: null,
      },
      closeDialog: false,
      isEdit: false,
      form: {
        id: null,
        variableName: "",
        variableExplain: "",
        variableValue: null,
        deptId: null,
      },
      rules: {
        variableName: [
          {
            required: true,
            message: "请输入变量名称",
            trigger: "blur",
          },
        ],
        variableValue: [
          {
            required: true,
            message: "请输入变量值",
            trigger: "blur",
          },
        ],
        variableExplain: [
          {
            required: true,
            message: "请输入变量说明",
            trigger: "blur",
          },
        ],
      },
      currentParent: 4,
      deptListParams: [],
      singleDeptList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getLoading() {
      this.loading = true;
    },
    getCheckedDeptId(val) {
      this.form.deptId = val;
    },
    getDeptList(list) {
      this.deptListParams = list;
      this.singleDeptList = getSingleArray(list);
      this.getList();
    },
    getDeptId(val) {
      this.queryParams.deptIds = val;
    },
    getDeptName(val) {
      let dept = this.singleDeptList.find((item) => item.id === val.toString());
      if (dept) return getFullDept(dept.fulllabel);
    },
    cancelInfo() {
      this.openInfo = false;
    },
    reset() {
      this.form.id = "";
      this.form.variableName = "";
      this.form.variableExplain = "";
      this.form.variableValue = "";
    },
    cancel() {
      this.closeDialog = false;
      this.reset();
    },
    // 查询按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置按钮
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
      this.$refs.commonDept.clearDept();
    },
    // 新增按钮
    handleAdd() {
      this.closeDialog = true;
      this.isEdit = false;
    },
    //编辑
    edit(row) {
      this.closeDialog = true;
      this.isEdit = true;
      this.id = row.id;
      Reflect.ownKeys(this.form).forEach((k) => (this.form[k] = row[k]));
    },
    // 详情
    getInfo(row) {
      this.openInfo = true;
      this.detailsTitle = "详情";
      // console.log(row)
      globalvariable_query({ id: row.id }).then((res) => {
        this.info.variableName = res.data.variableName;
        this.info.variableExplain = res.data.variableExplain;
        this.info.variableValue = res.data.variableValue;
        this.info.deptName = this.getDeptName(res.data.deptId || "");
      });
    },
    // 删除
    del(row) {
      // console.log(row)
      const deptId = row.deptId;
      this.$GlobalDeleteConfirm(
        "删除该数据将同时删除该组织下其他变量参数，确认删除？"
      )
        .then(() => {
          globalvariable_delete({ deptId }).then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("删除成功");
              if (
                this.queryParams.pageNum > 1 &&
                deptId.split(",").length === this.List.length
              ) {
                this.queryParams.pageNum -= 1;
              }
              this.getList();
            } else {
              this.$GlobalErrorConfirm("删除失败", res.msg);
            }
          });
        })
        .catch(() => {});
    },
    getList() {
      this.loading = true;
      globalvariable_Lsit(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.List = res.data.dataList;
            this.List.forEach(
              (item) => (item.deptName = this.getDeptName(item.deptId || ""))
            );
            this.totalCount =
              res && res.data.totalCount ? res.data.totalCount : 0;
          } else {
            this.List = [];
            this.totalCount = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitForm() {
      const params = {
        ...this.form,
        id: this.id,
      };
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;

          if (this.isEdit) {
            globalvariable_update(params)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("编辑成功");
                  this.closeDialog = false;
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            globalvariable_add(this.form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("新增成功");
                  this.closeDialog = false;
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm("新增失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style scoped></style>
